<%@page pageEncoding="UTF-8" %>
<%@ include file="../include/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>${sysName}->食安地图</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="${ctx}/resources/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/resources/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="${ctx}/resources/css/style.css" media="all">
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container, #app {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .selectpicker {
            padding: 3px;
            border-radius: 5px;
            min-width: 80px;
        }
    </style>
</head>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=LSleXEqaIIFW9BFbzWUfla4xoeV0fGDI"></script>
<script src="${ctx}/resources/layuiadmin/layui/layui.js"></script>
<body>
<div id="app">
    <div id="container">
    </div>
    <div class="map_header_bg_left">
        <select class="selectpicker" id="province" size=1>
        </select>
        <select class="selectpicker" id="city" style="width:60px">
        </select>
        <span id="showSelectCity"></span>
    </div>
    <div class="map_header_bg_right">
        已加入经营户:<span style="color: white;font-size: 18px; font-weight: bold">{{individualTotal}}</span> 家
    </div>
</div>
<script type="text/javascript" src="${ctx}/resources/js/city.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            showDetailDialog: false,
            individualTotal: 0,
        },
        created: function () {
            this.loadIndividualTotal();
        },
        methods: {
            // 点击关闭按钮执行
            onClose: function () {
                this.showDetailDialog = false
            },
            loadIndividualTotal: function () {
                $.ajax({
                    url: "${ctx}/backstage/map/getIndividualTotal",
                    data: {},
                    dataType: 'json',
                    success: function (returndata) {
                        if (returndata.success) {
                            app.individualTotal = returndata.data;
                        } else {
                            app.individualTotal = 0;
                            /* app.$notify.error({
                                 title: '错误',
                                 message: returndata.errors.message
                             });*/
                        }
                    }
                });
            },
        }
    })
</script>
<script type="text/javascript">
    cityInit("广东", "阳江");
    var map = new BMap.Map("container");
    var geolocation = new BMap.Geolocation();
    // 鼠标滚动放大缩小
    map.enableScrollWheelZoom();
    // 创建地图实例  阳江市 111.9890268400,21.8645319600 深圳市 114.0661345300 ,22.5485544100
    var point = new BMap.Point(114.0661345300, 22.5485544100);
    // 创建点坐标
    map.centerAndZoom(point, 10);
    // 初始化地图，设置中心点坐标和地图级别
    var marker = new BMap.Marker(point);        // 创建标注
    marker.setLabel("content");
    map.addOverlay(marker);                     // 将标注添加到地图中
    // 延迟一秒移动到阳江市
    setTimeout(function () {
        var point_yangjiang = new BMap.Point(111.9890268400, 21.8645319600)
        map.panTo(point_yangjiang);
        // map.setZoom(14)
    }, 1000)

    // 复杂的自定义覆盖物--定义一个构造函数ComplexCustomOverlay,名字随意
    function ComplexCustomOverlay(point, text, length, id) {
        this._center = point;
        this._text = text;
        this._length = length;
        this.id = id;
    }

    // 继承API的BMap.Overlay
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    // 实现initialize方法，当调用map.addOverlay方法时，API会调用此方法
    ComplexCustomOverlay.prototype.initialize = function (map) {
        this._map = map;
        var that = this
        var div = this._div = document.createElement("div");
        div.style.display = "flex";
        div.style["flex-direction"] = "column";
        div.style.position = "absolute";
        div.style.zIndex = BMap.Overlay.getZIndex(this._center.lat);
        // div.style.backgroundColor = 'rgba(251,148,71,.9)';
        div.style.border = "1px solid transparent";
        div.style.borderRadius = "5px";
        div.style.color = "#fff";
        div.style.height = this._length + "px";
        div.style.width = this._length + "px";
        div.style.padding = "2px";
        div.style.MozUserSelect = "none";
        div.style.fontSize = "12px";
        // 拼接div内容
        div.innerHTML = this._text;
        div.onmouseenter = function () {
            var first = div.firstElementChild
            first.style.backgroundColor = 'rgba(251,83,58,0.9)'
        };
        div.onmouseleave = function () {
            var first = div.firstElementChild
            first.style.backgroundColor = '#447ffa'
        };
        div.onclick = function () {
            map.panTo(that._center);
            // 打开新的页面
            //window.open("${ctx}/backstage/details?id="+that.id)
            openMapDetail(that.id)
        }

        // 将div添加到覆盖物容器中
        map.getPanes().labelPane.appendChild(div);
        // 需要将div元素作为方法的返回值，当调用该覆盖物的show、
        // hide方法，或者对覆盖物进行移除时，API都将操作此元素。
        return div;
    }
    // 到目前为止，我们仅仅把覆盖物添加到了地图上，但是并没有将它放置在正确的位置上。
    // 您需要在draw方法中设置覆盖物的位置，每当地图状态发生变化（比如：位置移动、级别变化）时，API都会调用覆盖物的draw方法，用于重新计算覆盖物的位置。
    ComplexCustomOverlay.prototype.draw = function () {
        var map = this._map;
        var position = this._map.pointToOverlayPixel(this._center);
        this._div.style.left = position.x - this._length / 2 + "px";
        // _div的底部中心点,作为坐标点来显示
        this._div.style.top = position.y - this._length + "px";
    }
    // 请求数据
    requestData({
        state: 1,  //1:可用 2:已经删除
        searchStr: '',  //名字检索
        districtId: '', //区ID
        townId: ''  //镇ID
    }, function (list) {
        if (list.length > 0) {
            for (i = 0; i < list.length; i++) {
                var name = list[i].name;
                var start = name.indexOf("镇");//获得字符串的开始位置
                if (start === -1) {
                    start = name.indexOf("区");
                }
                var result = name.substring(start + 1, name.length);//截取字符串
                var txt = getData(result, list[i].licenseImage)
                var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(list[i].longitude, list[i].latitude), txt, 70, list[i].id);
                map.addOverlay(myCompOverlay);
            }
        }
    })


    // 事件
    ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
        this._div['on' + event] = fun;
    }

    function getData(name, imgPath) {
        if (imgPath == null || imgPath.length == 0) {
            imgPath = "http://5b0988e595225.cdn.sohucs.com/images/20170724/ad28da0d658b43aba84ce91df9cacdad.jpeg"
        }
        var txt = '<div id="name" style="background:#447ffa;padding:3px;text-align:center;border-radius:5px">' + name + '</div>'
            + '<div style="display: flex;justify-content:center"><img style="width:45px;height:45px;border-radius:50%" src="${imgesBaseUrl}/' + imgPath + '"></div>'
            + '<div style="display: flex;justify-content:center"><img style="width:23px;height:23px" src="${ctx}/resources/image/arrow_down.png"></div> ',
            mouseoverTxt = txt + " " + parseInt(Math.random() * 1000, 10) + "套";
        return txt;
    }

    function requestData(param, cb) {
        $.ajax({
            url: "${ctx}/backstage/map/query",
            data: param,
            dataType: 'json',
            success: function (returndata) {
                if (returndata.success) {
                    cb(returndata.data)
                } else {
                    app.$notify.error({
                        title: '错误',
                        message: returndata.errors.message
                    });
                }
                app.loading = false;
            }
        });
    }

    function openMapDetail(id) {
        //创建一个临时的form表单
        var tempForm = document.createElement("form");
        tempForm.id = "tempForm1";
        tempForm.method = "post";
        tempForm.action = "${ctx}/backstage/details"
        //新窗口打开
        tempForm.target = "_blank";

        var hideInput = document.createElement("input");
        hideInput.type = "hidden";
        //params 以 - 连接
        hideInput.name ="id";
        hideInput.value =id;
        tempForm.appendChild(hideInput);

        //将此form表单添加到页面主体body中
        document.body.appendChild(tempForm);
        //手动触发，提交表单
        tempForm.submit();
        //从body中移除form表单
        document.body.removeChild(tempForm);
    }

    // myPosition()
    function myPosition() {
        console.log("正在查找我的位置，请稍后");
        geolocation.getCurrentPosition(function (r) {
            if (r == null) {
                return
            }
            console.log("我的位置" + JSON.stringify(r))
            // 我的位置{"accuracy":null,"altitude":null,"altitudeAccuracy":null,"heading":null,
            // "latitude":"22.54605355","longitude":"114.02597366","speed":null,"timestamp":null,
            // "point":{"lng":114.02597366,"lat":22.54605355},"address":{"country":"","city":"深圳市",
            // "city_code":0,"district":"","province":"广东省","street":"","street_number":""}}
            map.panTo(new BMap.Point(r.longitude, r.latitude));
        }, {enableHighAccuracy: true})
    }
</script>
</body>
</html>